﻿<!-- #layout name=empty -->
<div class="page-loading" style="display: none;">
    <div class="content">
        <p><i class="fa fa-spinner fa-spin"></i> <span>Logging in...</span></p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
            <div class="block-small-form">
                <div class="logo">
                    <img src="/_admin/Images/logo-blue.png" alt="Logo">
                </div>
                <div class="tab-content">
                    <div id="tab_account_login" class="tab-pane fade active in">

                        <form data-bind="submit: onLogin">
                            <div class="form-group">
                                <label class="sr-only">Username</label>
                                <input class="form-control" type="text" data-bind="textInput: username, error: username" placeholder="Username" />
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Password</label>
                                <input class="form-control" type="password" data-bind="textInput: password, error: password" placeholder="Password" />
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" data-bind="checked: remember, value: remember" />Keep me signed in</label>
                                </div>
                            </div>
                            <button class="btn blue" type="submit">Sign in</button>
                            <p>
                                <a data-bind="attr:{ href: forgotPasswordUrl }">Forgot password?</a>
                            </p>
                            <p>
                                <span>Do not have an account?</span> <a data-bind="attr:{ href: registerUrl }">Create an account</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {

        var loginViewModel = function() {
            var self = this;

            self.username = ko.validateField({
                required: Kooboo.text.validation.required
            });

            self.password = ko.validateField({
                required: Kooboo.text.validation.required
            });

            self.remember = ko.observable();

            self.showError = ko.observable(false);

            self.isValid = function() {
                if (!self.username()) {
                    self.username("");
                }

                if (!self.password()) {
                    self.password("");
                }

                return self.username.isValid() && self.password.isValid();
            };

            self.onLogin = function() {
                if (self.isValid()) {
                    self.showError(false);

                    Kooboo.User.login({
                        username: self.username(),
                        password: self.password(),
                        remember: self.remember(),
                        returnUrl: Kooboo.getQueryString("returnurl"),
                        type: Kooboo.getQueryString("type")
                    }).then(function(res) {
                        if (res.success) {
                            location.href = res.model;
                        }
                    });

                } else {
                    self.showError(true);
                }
            }


            self.forgotPasswordUrl = Kooboo.Route.Get(Kooboo.Route.User.ForgotPassword);

            self.registerUrl = ko.pureComputed(function() {
                return Kooboo.Route.User.RegisterPage;
            })
        };

        var login = new loginViewModel();
        ko.applyBindings(login, document.getElementsByClassName("container")[0]);
    });
</script>